<style>
.mimo-checkbox{line-height:38px;}
.mimo-checkbox label{margin-right:15px;}
.shrink input:focus{background-color:#ffffcc;}
.shrink select:focus{background-color:#ffffcc;}
.shrink button:focus{font-size:20px;font-weight:bold}
.shrink input[type=checkbox]:focus{width: 18px;height: 18px;}
.shrink .mes-width{border: 1px solid #eee; height: 38px; line-height: 38px; display: block;padding-left: 10px;}
</style>
<div class="shrink">
	<table width="100%">
		<tr>
			<td valign="top">

				<form class="layui-form" action="">
					<div class="layui-form-item" style="margin-bottom:inherit;">
						<div class="layui-inline">
							<label class="layui-form-label">订单号/采购批号</label>
							<div class="layui-input-inline">
								<input type="text" name="client_ordernum" id="client_ordernum" next="material_id" last="btnreset" value="" max="9999999999" min="1" maxlength="20" tabindex="1" autocomplete="off" class="layui-input client-ordernum mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">面料名称</label>
							<div class="layui-input-inline">
								<select name="material_id" id="material_id" next="cloth_num" last="client_ordernum" class="mimo-tab" tabindex="2" lay-ignore style="height:36px;line-height:36px; border:1px solid #E6E6E6; width:190px;">
								</select>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">布号</label>
							<div class="layui-input-inline">
								<input type="text" name="cloth_num" id="cloth_num" next="weight_shrink" last="material_id" tabindex="3" max="999" min="1" maxlength="3" lay-verify="required|mimoint" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">缩前重量</label>
							<div class="layui-input-inline">
								<input type="text" name="weight_shrink" id="weight_shrink" next="fabric_width_shrink" last="cloth_num" tabindex="4" max="45" min="0" maxlength="5" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">缩前布封</label>
							<div class="layui-input-inline">
								<input type="text" name="fabric_width_shrink" id="fabric_width_shrink" next="length_shrink" last="weight_shrink" tabindex="5" max="{:config('mp.fabric_width_max')}" min="{:config('mp.fabric_width_min')}" maxlength="6" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">MES布封</label>
							<div class="layui-input-inline">
								<span class="mes-width"></span>
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">缩前米长</label>
							<div class="layui-input-inline">
								<input type="text" name="length_shrink" id="length_shrink" next="true_fabric_width" last="fabric_width_shrink" tabindex="6" max="300" min="1" maxlength="6" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						
						<div class="layui-inline">
							<label class="layui-form-label">缩后布封</label>
							<div class="layui-input-inline">
								<input type="text" name="true_fabric_width" id="true_fabric_width" next="edge_damage" last="length_shrink" tabindex="7" max="{:config('mp.fabric_width_max')}" min="{:config('mp.fabric_width_min')}" maxlength="6" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">布边损料X2</label>
							<div class="layui-input-inline">
								<input type="text" name="edge_damage" id="edge_damage" next="length" last="true_fabric_width" tabindex="8" max="8" min="0" maxlength="1" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">缩水米长</label>
							<div class="layui-input-inline">
								<input type="text" name="length" id="length" next="weight_page" last="edge_damage" tabindex="9" max="300" min="1" maxlength="6" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">纸筒重量</label>
							<div class="layui-input-inline">
								<input type="text" name="weight_page" id="weight_page" next="rejects_length" last="length" tabindex="10" max="45" min="0" maxlength="5" lay-verify="required|number" autocomplete="off" class="layui-input mimo-tab required" style="width:90px;display:inline;"><span style="color:#999">&nbsp;客户纸筒:<span id="customer_tube_weight">0.00</span></span>
							</div>
						</div>
						
						<div class="layui-inline">
							<label class="layui-form-label">次品米长</label>
							<div class="layui-input-inline">
								<input type="text" name="rejects_length" id="rejects_length" next="rejects_id_1" last="length" tabindex="11" max="300" min="0" maxlength="6" lay-verify="mimonumber" autocomplete="off" class="layui-input mimo-tab required">
							</div>
						</div>
						<div class="layui-block">
							<label class="layui-form-label">次品类型</label>
							<div class="layui-input-block mimo-checkbox">
								{volist name="rejectsKV" id="v"}
								<label><input type="checkbox" name="rejects_id[]" id="rejects_id_{$i}" next="{if $i==$rejectsCount }btnsave{else /}rejects_id_{$i+1}{/if}" last="{if $i==1 }rejects_length{else /}rejects_id_{$i-1}{/if}" tabindex="12" class="mimo-tab" lay-ignore value="{$v}">{$v}</label>
								{/volist}
							</div>
						</div>
						<div class="layui-form-item">
							<div class="layui-input-block" style="margin-left:inherit;text-align:center;">
								<button type="submit" id="btnsave" class="layui-btn layui-btn-normal mimo-tab" next="btnrejects" last="rejects_id_{$rejectsCount}" lay-submit="" tabindex="100" lay-filter="save">缩水确认</button>
								<button type="submit" id="btnrejects" class="layui-btn layui-btn-danger mimo-tab" next="btnreset" last="btnsave" lay-submit="" tabindex="101" lay-filter="rejects">次品退料</button>
								<button type="reset" id="btnreset" class="layui-btn layui-btn-primary mimo-tab" next="client_ordernum" last="btnrejects" tabindex="102" >重置</button>
							</div>
						</div>
					</div>
				</form>
				
			</td>
		</tr>
		<tr>
			<td valign="top">
				<table id="dataTable"></table>
			</td>
		</tr>
	</table>

</div>
<script type="text/html" title="订单号/采购批号" id="client_ordernumTpl">
	{{# if (d.is_return==1){ }}
	<span class="layui-badge">退</span>
	{{# } }}
	{{# if (d.stock_m_type==0){ }}
	<span class="copy-item">{{d.client_ordernum}}</span>
	{{# }else { }}
	<span class="copy-item">B{{d.order_material_id}}</span>
	{{# } }}
</script>
{include file="system@block/layui" /}

<script type="text/javascript">
    layui.use(['table', 'jquery', 'layer', 'form', 'tool'], function() {
    	var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        
        // 今日缩水记录
        if($(window).width() >= 600) {
	        table.render({
	            elem: '#dataTable'
	            ,url: '{:url("todayLog")}' //数据接口
	            ,page: true //开启分页
	            ,skin: 'row'
	            ,even: true
	            ,height:'full-440'
	            ,limit: 20
	            ,limits: [20,50,100,150,200]
	            ,text: {
	                none : '暂无相关数据'
	            }
	            ,toolbar: false
	            ,cols: [[ //表头
	                {field: 'seq', title: '序号'}
					,{field: 'client_ordernum', title: '订单号/采购批号', templet: '#client_ordernumTpl'}
					,{field: 'material_name', title: '面料'}
	                ,{field: 'cloth_num', title: '布号'}
	                ,{field: 'weight_shrink', title: '缩前重量'}
	                ,{field: 'fabric_width_shrink', title: '缩前布封'}
	                ,{field: 'length_shrink', title: '缩前米长'}
	                ,{field: 'true_fabric_width', title: '缩后布封'}
	                ,{field: 'edge_damage', title: '布边损料'}
	                ,{field: 'length', title: '缩后米长'}
	                ,{field: 'weight_page', title: '纸筒重量'}
	                ,{field: 'caichuang_type_text', title: '裁剪类型'}
	            ]]
	        });
        }
        
        // 重置表单部分控件
        window.resetCheckcloth = function(){
        	$('input[name="cloth_num"]').val('');
        	$('input[name="weight_shrink"]').val('');
        	$('input[name="fabric_width_shrink"]').val('');
        	$('input[name="length_shrink"]').val('');
        	$('input[name="edge_damage"]').val('');
        	$('input[name="weight_page"]').val('');
        	$('input[name="length"]').val('');
        	$('input[name="true_fabric_width"]').val('');
        	$('input[name="rejects_length"]').val('');
        	$("input[name^='rejects_id']").attr("checked", false);
			form.render('checkbox');
        };
        
        // 上下键切换
        $(document).on('keyup','.mimo-tab',function(e){
        	if(e.keyCode == 40) {
        		var objNext = $(this).attr('next');
        		if (typeof(objNext) != "undefined") {
        			$('#'+objNext).focus();
        		}
        	}
        	if(e.keyCode == 38) {
        		var objLast = $(this).attr('last');
        		if (typeof(objLast) != "undefined") {
        			$('#'+objLast).focus();
        		}
        	}
        });
        
     	// 获取面料
     	var weightList = null;
     	var widthList = null,tube_weight=null;
		$(document).on('blur','.client-ordernum',function(){
			var clientOrdernum = $(this).val();
			if (clientOrdernum!='') {
				$.ajax({
		 		   type: "POST",
		 		   url: "{:url('checkclothShrink/getMaterialList')}",
		 		   data: "client_ordernum="+clientOrdernum,
		 		   dataType:"json",
		 		   success: function(res){
		 			  if (res.code == 1) {
		 				 weightList = res.data.weightList;
		 				 widthList = res.data.widthList;
						 tube_weight=res.data.tube_weight;
		 				 var option = '',firstOptionId='';
		 				 for (var x in res.data.list) {
		 					 option = option + '<option value="'+x+'">'+res.data.list[x]+'</option>';
							 firstOptionId=firstOptionId==''? x : firstOptionId;
		 				 }
		 				 $('#material_id').html(option);
						 $("#customer_tube_weight").html(res.data.tube_weight[firstOptionId]);
		 				 if(Object.keys(res.data.list).length == 1) {
		 					 $('#cloth_num').focus();
		 				 }
		 				 materialIdChange();
					  } else {
                          layer.alert(res.msg, {
                            icon: 2,
                            skin: 'layer-ext-demo' //见：扩展说明
                          })
						 //layer.msg(res.msg, {icon: 2,anim: 6});
					  }
		 		   }
		 		});
			} else {
				$('#material_id').html('');
				materialIdChange();
			}
		});
        
		//监听提交
		form.on('submit(save)', function(data){
			submitShrink('save', "{:url('save')}", data.field);
			return false;
		});
		form.on('submit(rejects)', function(data){
			console.log(data.field);
		    submitShrink('rejects', "{:url('rejects')}", data.field);
		    return false;
		});
		window.submitShrink = function(action, url, d) {
			if (d.weight_shrink > 50 || d.weight_shrink < 0) {
				layer.msg('缩前重量范围0-50', {icon: 2,anim: 6});
				$('input[name="weight_shrink"]').select();
				return false;
			}
		    if (d.length_shrink > 300 || d.length_shrink < 1) {
				layer.msg('缩前米长范围1-300', {icon: 2,anim: 6});
				$('input[name="length_shrink"]').select();
				return false;
			}
			if (d.fabric_width_shrink > {:config('mp.fabric_width_max')} || d.fabric_width_shrink < {:config('mp.fabric_width_min')}) {
				layer.msg("缩前布封范围{:config('mp.fabric_width_min')}-{:config('mp.fabric_width_max')}", {icon: 2,anim: 6});
				$('input[name="fabric_width_shrink"]').select();
				return false;
			}
			if (d.edge_damage > 8 || d.edge_damage < 0) {
				layer.msg('布边损料范围0-8', {icon: 2,anim: 6});
				$('input[name="edge_damage"]').select();
				return false;
			}
		    if (d.length > 300 || d.length < 1) {
				layer.msg('缩水米长范围1-300', {icon: 2,anim: 6});
				$('input[name="length"]').select();
				return false;
			}
			if (d.true_fabric_width > {:config('mp.fabric_width_max')} || d.true_fabric_width < {:config('mp.fabric_width_min')}) {
				layer.msg("缩后布封范围{:config('mp.fabric_width_min')}-{:config('mp.fabric_width_max')}", {icon: 2,anim: 6});
				$('input[name="true_fabric_width"]').select();
				return false;
			}
			if (d.rejects_length != '' && (d.rejects_length > 300 || d.rejects_length < 0)) {
				layer.msg('次品米长范围0-300', {icon: 2,anim: 6});
				$('input[name="rejects_length"]').select();
				return false;
			}
			if (d.weight_page > 50 || d.weight_page < 0) {
				layer.msg('纸筒重量范围0-50', {icon: 2,anim: 6});
				$('input[name="weight_shrink"]').select();
				return false;
			}
			if (d.rejects_length == '' && action == 'rejects') {
				layer.msg('请填写次品米长', {icon: 2,anim: 6});
				$('input[name="rejects_length"]').select();
				return false;
			}
			
			var ckbox = [];
		    $("input[name^='rejects_id']:checked").each(function() {
		    	ckbox.push($(this).val());
		    });
		    if (ckbox.length == 0 && action == 'rejects') {
		    	layer.msg('请选择次品类型', {icon: 2,anim: 6});
				return false;
		    }
		    
			// 当前实际克重= （缩前重量/kg - 纸筒重量/kg)/(缩前米长 X （缩前布封 / 100)) X1000
			var currentWeight = (d.weight_shrink-d.weight_page)/(d.length*(d.true_fabric_width/100))*1000;
			currentWeight = currentWeight.toFixed(2);
			customerWeight = weightList[d.material_id];
			if (currentWeight - customerWeight > 10) {
				layer.confirm("公司克重：<span class='layui-badge layui-bg-orange'>"+customerWeight+"</span><br>实际克重：<span class='layui-badge'>"+currentWeight+"</span>", {title:'克重超标提醒', btn: ['确定','取消']}, function(){
					submitShrinkAjax(url, d);
				});
			} else {
				submitShrinkAjax(url, d);
			}
			return false;
		}
		
		// 监听物料切换，显示mes幅宽
		window.materialIdChange = function() {
			var materialId = $("#material_id").val();
			if (materialId != '' && materialId != null) {
				console.log('ww');
				var mesWidth = widthList[materialId];
				$(".mes-width").html(mesWidth);
				$("#customer_tube_weight").html(tube_weight[materialId]);
			} else {
				$(".mes-width").html('');
				$("#customer_tube_weight").html('0.00');
			}
		}
		
		// 监听物料切换事件
        $(document).on('change','#material_id',function(e){
        	materialIdChange();
        });
		
		window.submitShrinkAjax = function(url, d) {
			$.ajax({
		 		   type: "POST",
		 		   url: url,
		 		   data: d,
		 		   dataType:"json",
		 		   success: function(res){    
		 			  if (res.code == 1) {
		 				 layer.msg(res.msg, {icon: 1});
		 				 resetCheckcloth();
		 				 table.reload('dataTable');
                         if(res.data['exception']==1){
                            layer.confirm(res.data['msg'], {
                                btn: ['知道了']
                            });
                        }
					  } else if(res.code == -1) {
						  layer.confirm(res.msg, {title:'多料提醒', btn: ['确定','取消']}, function(){
							  	d.confirm = 1;
								submitShrinkAjax(url, d);
						  });
					  } else {
						 layer.msg(res.msg, {icon: 2,anim: 6});
					  }
		 		   }
		 	});
		}
		
		var regFloat = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; // 浮点数，小数点后两位
		var regInt = /^\d+$/; // 整数
        form.verify({
        	mimonumber: function(value, item){
        	    if (value=='') return '';
        	    if(! regFloat.test(value)){
        	    	return '只能填写数字';
        	    }
        	},
        	mimoint: function(value, item){
        	    if (value=='') return '';
        	    if(! regInt.test(value)){
        	    	return '只能填写数字';
        	    }
        	}
        });
    });
</script>